<template>
  <div class="order-manage-container">
    <div class="addOrderBox">
      <el-button type="primary" @click="addNewPlan">新增保养计划</el-button>

      <el-button
        type="default"
        class="exportOrder"
        v-has="'maintenanceApp:maintenanceNotice:export'"
        @click="exportData"
        >导出</el-button
      >
      <el-checkbox class="hideOrder" v-model="hiddenOrder" @change="getTableData">隐藏已完成记录</el-checkbox>
    </div>
    <div class="operate-bar">
      <ul>
        <li>
          <el-select v-model="statusAll" placeholder="所有状态" class="statusAll" clearable @change="getTableData">
            <el-option
              v-for="item in statusOptions"
              :key="item.value + 1"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </li>
        <li>
          <el-date-picker
            v-model="timeFrame"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="getTableData"
          >
          </el-date-picker>
        </li>
        <li>
          <el-input
            placeholder="输入设备名称/编号查找"
            class="orderNum"
            v-model="order_no"
            clearable
            @change="getTableData"
          >
          </el-input>
        </li>
      </ul>
    </div>
    <CommonTable
      :options="tableConfig.options"
      :columns="tableConfig.columns"
      :actions="tableConfig.actions"
      :data="tableData"
      @handleSortChange="handleSortChange"
      class="tableBox"
    ></CommonTable>
    <CommonPagination :options="paginationOptions" :dataSource="getTableData" class="pagedown"></CommonPagination>
    <el-dialog
      title="保养通知详情"
      :visible.sync="dialogAddOrder"
      width="60%"
      :modal-append-to-body="false"
      class="detailNoticeDialog"
    >
      <div class="titleName">
        <p>{{ noticeDetailForm.deviceName }}</p>
        <span>({{ noticeDetailForm.deviceNumber }})</span>
      </div>

      <el-form ref="handleForm" :model="noticeDetailForm" label-width="100px">
        <el-form-item class="shorter" label="计划名称">
          <span disabled>{{ noticeDetailForm.planName }}</span>
        </el-form-item>
        <el-form-item label="物模型" class="shorter">
          <span placeholder="请输入内容">{{ noticeDetailForm.modelName }}</span>
        </el-form-item>
        <el-form-item label="通知时间" class="shorter">
          <span placeholder="请输入">{{
            noticeDetailForm.modeText === '周期'
              ? new Date(noticeDetailForm.time).Format('yyyy-MM-dd')
              : new Date(noticeDetailForm.time).Format('yyyy-MM-dd h:m:s')
          }}</span>
        </el-form-item>
        <el-form-item label="设备类型" class="shorter">
          <span placeholder="请输入">{{ noticeDetailForm.topText }}</span>
        </el-form-item>
        <el-form-item label="合同编号" class="short">
          <span placeholder="请输入">{{ noticeDetailForm.protocol }}</span>
        </el-form-item>
        <el-form-item label="产线编号" class="shorter">
          <span disabled placeholder="请输入">{{ noticeDetailForm.productNumber }}</span>
        </el-form-item>
        <el-form-item label="产线识别号" class="shorter">
          <span disabled placeholder="请输入">{{ noticeDetailForm.identificationNumber }}</span>
        </el-form-item>
        <el-form-item label="所属客户" class="short">
          <span placeholder="请输入">{{ noticeDetailForm.company }}</span>
        </el-form-item>
        <el-form-item label="设备地址" class="short">
          <span placeholder="请输入">{{ noticeDetailForm.deviceAddress }}</span>
        </el-form-item>
        <el-form-item label="模式" class="shorter">
          <span disabled placeholder="请输入">{{ noticeDetailForm.modeText }}</span>
        </el-form-item>
        <el-form-item label="当前值" class="shorter">
          <span disabled placeholder="请输入">{{ noticeDetailForm.currentValue }}</span>
        </el-form-item>
        <el-form-item label="处理状态" class="shorter">
          <span disabled placeholder="请输入">{{ noticeDetailForm.statusText }}</span>
        </el-form-item>
        <el-form-item label="变量名" class="shorter">
          <span disabled placeholder="请输入">{{ noticeDetailForm.vname }}</span>
        </el-form-item>
        <el-form-item class="textAreaItem" label="保养说明">
          <span disabled placeholder="请输入">{{ noticeDetailForm.maintenanceExplain }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogAddOrder = false">关 闭</el-button>
        <el-button
          type="primary"
          v-if="checkPermission('maintenanceApp:maintenanceNotice:transOrder')"
          @click="addRepairOrder"
          >转工单</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      title="保养通知转工单"
      :visible.sync="dialogHandleOrder"
      width="50%"
      class="noticeWorkOrderDialog"
      :modal-append-to-body="false"
      :close-on-click-modal="false"
      append-to-body
    >
      <div class="titleName">
        <p>{{ handleForm.deviceName }}</p>
        <span>({{ handleForm.device_number }})</span>
      </div>
      <el-form ref="handleForm" :model="handleForm" label-width="100px" :rules="handleRules">
        <el-form-item label="计划名称">
          <el-input v-model="handleForm.maintainPlan" disabled></el-input>
        </el-form-item>
        <el-form-item label="保养说明">
          <el-input
            v-model="handleForm.description"
            placeholder="请输入内容"
            type="textarea"
            maxlength="500"
            show-word-limit
          ></el-input>
        </el-form-item>
        <el-form-item label="现场联系人" prop="contacts">
          <el-input v-model="handleForm.contacts" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="联系人电话" prop="contacts_tel">
          <el-input v-model="handleForm.contacts_tel" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="设备地址">
          <el-input v-model="handleForm.address" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="合同编号">
          <el-input disabled v-model="handleForm.project_contract" placeholder="请输入"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogHandleOrder = false">取 消</el-button>
        <el-button type="primary" @click="submitAddOrder">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="接单成功" :visible.sync="dialogsucce" width="20%" :modal-append-to-body="false">
      工单（{{ receivingNum }}）已接单成功，请及时进行处理
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogsucce = false">取 消</el-button>
        <el-button
          type="primary"
          v-if="checkPermission('maintenanceApp:maintenanceNotice:doOrder')"
          @click="submitDeleteOrder"
          >处理工单</el-button
        >
      </span>
    </el-dialog>
    <details-dialog
      :show.sync="dialogDetails"
      :detailData.sync="detailData"
      :TEMPdata.sync="OrderDetails"
      @sonClick="sonClick"
      v-if="dialogDetails"
    ></details-dialog>
  </div>
</template>

<script>
import CommonTable from '@/components/CommonTable.vue';
import CommonPagination from '@/components/CommonPagination.vue';
import detailsDialog from '@/components/CommonCompletedDetailsDialog.vue';
import checkBtnPermission from '@/utils/checkBtnPermission';
import {
  getMaintainNoticeList,
  transferMaintainOrder,
  getAccessoriesList,
  getPlanDetail,
  completeOrder,
  createOrder,
  getDeviceList,
  getDeviceLastProject,
  getDeviceLastContact
} from '@/api/orderManage';

export default {
  name: 'maintenanceNotice',
  components: {
    CommonTable,
    CommonPagination,
    detailsDialog
  },
  data() {
    return {
      dialogImg: false, //图片预览弹窗
      statusAll: '', //筛选所有状态
      order_type: '', //筛选所有类型
      order_no: '', //筛选工单编号
      tableData: [], //表格数据
      partsTableData: [], //配件表格
      newStatus: '', //最新的状态
      prop: '', //排序的值
      handleForm: {
        project_contract: '根据设备获取',
        type: '',
        deviceNum: '',
        deviceName: '',
        explain: '',
        add: '',
        description: '',
        contacts_tel: '',
        contacts: ''
      }, //工单
      handleRules: {
        explain: [{ required: true, message: '请输入活动名称', trigger: 'blur' }],
        contacts: [{ required: true, message: '请输入联系人姓名', trigger: 'blur' }],
        contacts_tel: [{ required: true, message: '请输入联系人电话', trigger: 'blur' }]
      },
      noticeDetailForm: { id: '' },
      statusOptions: [
        { label: '待处理', value: '2' },
        { label: '处理中', value: '3' },

        { label: '处理完成', value: '5' }
      ],
      typeOptions: [
        { label: '已创建', value: 1 },
        { label: '已派单', value: 2 },
        { label: '已接单', value: 3 },
        { label: '已完成', value: 4 },
        { label: '已取消', value: 5 }
      ],
      // 检查
      checkPermission(name) {
        return checkBtnPermission(name);
      },
      //新增维修工单参数
      ruleForm: {
        deviceName: '',
        orderType: '',
        deviceNum: '',
        description: '',
        isReport: true,
        contacts: '',
        contacts_tel: '',
        address: ''
      },
      //验证规则
      rules: {
        orderType: [{ required: true, message: '请选择工单类型', trigger: 'blur' }],
        deviceName: [{ required: true, message: '请输入设备名称', trigger: 'blur' }],
        deviceNum: [{ required: true, message: '请输入设备编号', trigger: 'blur' }],
        contacts: [{ required: true, message: '请输入现场联系人', trigger: 'blur' }],
        contacts_tel: [
          { required: true, message: '请输入联系电话', trigger: 'blur' },
          {
            pattern: /^(13[0-9]|14[5|7]|15[0|1|2|3|4|5|6|7|8|9]|18[0|1|2|3|5|6|7|8|9])\d{8}$/,
            message: '联系电话输入错误'
          }
        ]
      },
      //分页配置
      paginationOptions: {
        total: 0,
        currentPage: 1,
        pageSize: 15,
        pageSizes: [15, 30, 50, 100],
        pagerCount: 5,
        isShow: true,
        isDisabled: false
      },
      dialogAddOrder: false, //新增维修工单弹窗
      dialogImageUrl: '', //预览图片地址
      dialogVisible: false,
      disabled: false,
      dialogHandleOrder: false, //处理工单弹窗
      dialogsucce: false, //接单成功
      diglogSelectACC: false, //选择配件
      receivingNum: '', //接单的工单号
      multipleSelection: [], //配件数据
      handleOrderId: '',
      dialogDetails: false, //详情弹窗
      detailData: {}, //详情的数据
      OrderDetails: {},
      clickRow: {}, //点击的行数据
      hiddenOrder: false,
      imgList: [], //上传图片列表
      selectDevice: '', //选中的设备
      numOptions: [], //设备编号列表
      timeFrame: [], //时间范围
      sortType: ''
    };
  },
  computed: {
    tableConfig() {
      return {
        // table - options
        options: {
          // height: 0,
          height: '550px',
          hasSelection: true,
          hasIndex: true,
          lableIndex: '序号',
          isStripe: true,
          isBorder: false,
          isLoading: false,
          headerRowStyle: ({ row, rowIndex }) => {
            return {};
          },
          headerCellStyle: ({ row, column, rowIndex }) => {
            return { padding: '8px 0' };
          },
          rowStyle: ({ row, rowIndex }) => {
            return {};
          },
          cellStyle: ({ row, column, rowIndex }) => {
            return { padding: '8px 0' };
          }
        },
        // table - columns
        columns: [
          {
            prop: 'noticeTime',
            label: '通知时间',
            width: 180,
            hasSort: true,
            isShow: true
          },

          {
            prop: 'deviceNumber',
            label: '设备编号',
            width: '',
            hasSort: true,
            isShow: true
          },
          {
            prop: 'deviceName',
            label: '设备名称',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'planName',
            label: '计划名称',
            width: '',
            hasSort: true,
            isShow: true
          },
          {
            prop: 'vname',
            label: '变量名',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'modeText',
            label: '模式',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'currentValue',
            label: '当前值',
            width: '',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'maintenanceExplain',
            label: '保养说明',
            width: '180',
            hasSort: false,
            isShow: true
          },
          {
            prop: 'statusText',
            label: '处理状态',
            width: '',
            hasSort: 'custom',
            isShow: true
          }
        ],
        // table - actions
        actions: {
          title: '操作',
          width: 160,
          links: [
            {
              label: '详情',
              type: 'primary',
              permission: 'maintenanceApp:maintenanceNotice:detail',
              handleLinkClick: row => {
                this.dialogAddOrder = true;
                this.detailData = row;
                this.clickRow = row;
                console.log(row.id);

                getPlanDetail({ id: row.id }).then(res => {
                  this.noticeDetailForm = res.data;

                  // this.noticeDetailForm.mode = this.noticeDetailForm.mode === 1 ? '触发' : '周期';
                  if (this.noticeDetailForm.mode === 1) {
                    this.noticeDetailForm.modeText = '触发';
                    this.noticeDetailForm.time = new Date(this.noticeDetailForm.time).Format('yyyy/MM/dd hh:mm:ss');
                  } else if (this.noticeDetailForm.mode === 2) {
                    this.noticeDetailForm.modeText = '周期';
                    this.noticeDetailForm.time = new Date(this.noticeDetailForm.time).Format('yyyy/MM/dd');
                  }
                  let arr = [
                    { label: '待处理', value: 2 },
                    { label: '处理中', value: 3 },

                    { label: '处理完成', value: 5 }
                  ];
                  for (let i in arr) {
                    if (this.noticeDetailForm.status === arr[i].value) {
                      this.noticeDetailForm.statusText = arr[i].label;
                    }
                  }
                  // this.noticeDetailForm.statusText = arr[this.noticeDetailForm.status - 1];
                  let arr2 = ['搬运类', '输送类', '包装类', '其他类'];
                  this.noticeDetailForm.topText = arr2[this.noticeDetailForm.topid - 1];
                });
              },
              handleLinkShow: row => {
                if (row.status === 2) {
                  return true;
                }
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '转工单',
              type: 'primary',
              permission: 'maintenanceApp:maintenanceNotice:transOrder',
              handleLinkClick: row => {
                this.receivingNum = row.order_no;
                getPlanDetail({ id: row.id }).then(res => {
                  let data = res.data;
                  console.log(res.data);
                  this.handleForm.maintainPlan = data.planName;
                  this.handleForm.maintain_plan_id = data.id;
                  this.handleForm.description = data.maintenanceExplain;
                  this.handleForm.address = data.deviceAddress;
                  this.handleForm.deviceName = data.deviceName;
                  this.handleForm.device_id = data.deviceId;
                  this.handleForm.device_number = data.deviceNumber + '';
                  this.handleForm.id = data.id;
                  this.dialogHandleOrder = true;

                  getDeviceLastProject({ device_id: this.handleForm.device_id }).then(res => {
                    console.log(res.data.contacts);
                    this.handleForm.project_contract = res.data.contacts;
                  });
                  getDeviceLastContact({ device_id: data.deviceId }).then(res => {
                    this.handleForm.contacts = res.data.contacts;
                    this.handleForm.contacts_tel = res.data.contacts_tel;
                  });
                });
              },
              handleLinkShow: row => {
                if (row.status === 2) {
                  return true;
                }
                return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            },
            {
              label: '工单详情',
              type: 'primary',
              permission: 'maintenanceApp:maintenanceNotice:orderDetail',
              handleLinkClick: row => {
                console.log(row);

                this.detailData.id = row.orderId;
                // this.detailData.id = row.id;
                // this.detailData
                this.detailData.device_name = row.deviceName;
                this.detailData.device_number = row.deviceNumber;
                // this.handleForm.type = row.order_type;
                // this.handleForm.deviceNum = row.device_number;
                // this.handleForm.deviceName = row.device_name;
                this.dialogDetails = true;
              },
              handleLinkShow: row => {
                if (row.status === 5 || row.status === 3) {
                  return true;
                }
                // return false;
              },
              handleLinkDisabled: row => {
                return;
              }
            }
          ]
        }
      };
    }
  },
  created() {},
  mounted() {
    this.getTableData();
    //获取设备列表
    getDeviceList().then(res => {
      this.deviceList = res.data.list;
      res.data.list.forEach(element => {
        let temp = [];
        temp.label = element.number + '/' + element.name;
        temp.value = element.id;
        this.numOptions.push(temp);
      });
    });
    let params = {
      page: '1',
      page_size: '500'
    };
    //获取配件信息
    getAccessoriesList(params).then(res => {
      res.data.list.forEach(res => {
        res.num = 1;
      });
      this.partsTableData = res.data.list;
    });
  },
  methods: {
    sonClick(res) {
      // if (res === 'cancel') this.dialogCancelOrder = true;
      // if (res === 'modify') this.dialogModify = true;
      // if (res === 'delete') this.dialogDeleteOrder = true;
      // if (res === 'assign') this.dialogDistribute = true;
    },
    submitDeleteOrder() {},
    //图片删除
    handleRemove(file) {
      console.log(file);
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogImg = true;
    },
    // 导出
    exportData() {
      getMaintainNoticeList().then(res => {
        const list = res.data.list;
        let arr = [
          { label: '待处理', value: 2 },
          { label: '处理中', value: 3 },

          { label: '处理完成', value: 5 }
        ];
        list.forEach(element => {
          for (let i in arr) {
            if (element.status === arr[i].value) {
              element.statusText = arr[i].label;
            }
          }

          element.modeText = element.mode === 1 ? '触发' : '周期';
          element.noticeTime = new Date(element.time).Format('yyyy/MM/dd hh:mm:ss');
        });
        list.forEach(item => {});
        require.ensure([], () => {
          const { export_json_to_excel } = require('../../plugins/Export2Excel.js');
          const filterVal = [
            'noticeTime',
            'deviceNumber',
            'deviceName',
            'planName',
            'variable',
            'modeText',
            'current_value',
            'maintenanceExplain',
            'statusText'
          ];
          const tHeader = [
            '通知时间',
            '设备编号',
            '设备名称',
            '计划名称',
            '变量名',
            '模式',
            '当前值',
            '保养说明',
            '处理状态'
          ];
          const data = this.formatJson(filterVal, list);
          export_json_to_excel(tHeader, data, '保养通知');
        });
      });
    },
    //查看保养计划
    addNewPlan() {
      this.$router.push({ name: 'maintencePlan' });
    },
    //切换标签页
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //转工单
    addRepairOrder() {
      this.dialogHandleOrder = true;
      this.dialogAddOrder = false;
      let data = this.noticeDetailForm;
      this.handleForm.maintainPlan = data.planName;
      this.handleForm.maintain_plan_id = data.id;
      this.handleForm.description = data.maintenanceExplain;
      this.handleForm.address = data.deviceAddress;
      this.handleForm.deviceName = data.deviceName;
      this.handleForm.device_id = data.deviceId;
      this.handleForm.device_number = data.deviceNumber + '';
      this.handleForm.id = data.id;
      getDeviceLastProject({ device_id: this.handleForm.device_id }).then(res => {
        console.log(res.data.contacts);
        this.handleForm.project_contract = res.data.contacts;
      });
      getDeviceLastContact({ device_id: this.handleForm.device_id }).then(res => {
        this.handleForm.contacts = res.data.contacts;
        this.handleForm.contacts_tel = res.data.contacts_tel;
      });
    },

    transferRepairOrder() {
      // this.dialogHandleOrder = false;
      this.dialogAddOrder = true;
    },
    //勾选配件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //选中设备
    changeDevice() {
      this.deviceList.forEach(res => {
        if (res.id === this.selectDevice) {
          this.ruleForm.address = res.countries + res.province + res.city + res.address;
          this.ruleForm.deviceName = res.name;
        }
      });
    },
    handleBeforeUpload(file) {
      let that = this;
      if (
        !(
          file.raw.type === 'image/png' ||
          file.raw.type === 'image/gif' ||
          file.raw.type === 'image/jpg' ||
          file.raw.type === 'image/jpeg'
        )
      ) {
        this.$message.error('上传文件类型必须是图片!');
      } else {
        let reader = new FileReader();
        reader.onload = function (e) {
          that.imgList.push({ url: reader.result });
        };
        reader.readAsDataURL(file.raw);
      }
    },
    // 获取表格数据
    getTableData() {
      let params = {
        page: this.paginationOptions.currentPage, //当前页
        page_size: this.paginationOptions.pageSize, //每页显示数据条数
        keyword: this.order_no,
        status: this.statusAll,
        hide: this.hiddenOrder ? 1 : 0,
        beginTime: this.timeFrame && this.timeFrame[0] ? new Date(this.timeFrame[0]).Format('yyyy-MM-dd hh:mm:ss') : '',
        endTime: this.timeFrame && this.timeFrame[1] ? new Date(this.timeFrame[1]).Format('yyyy-MM-dd  hh:mm:ss') : '',
        sort: this.prop,
        sortType: this.sortType
      };
      getMaintainNoticeList(params).then(res => {
        if (res.data.list) {
          this.tableData = res.data.list;
          this.paginationOptions.total = res.data.total;
          res.data.list.forEach(element => {
            let arr = [
              { label: '待处理', value: 2 },
              { label: '处理中', value: 3 },

              { label: '处理完成', value: 5 }
            ];
            for (let i in arr) {
              if (element.status === arr[i].value) {
                element.statusText = arr[i].label;
              }
            }

            element.modeText = element.mode === 1 ? '触发' : '周期';
            element.noticeTime = new Date(element.time).Format('yyyy/MM/dd hh:mm:ss');
          });
        } else {
          this.tableData = [];
        }
      });
    },
    // 格式化json
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]));
    },
    // 字段排序
    handleSortChange(column, prop, order) {
      console.log('handleSortChange---', column, prop, order);

      if (column.prop === 'noticeTime') {
        this.prop = 'time';
      } else if (column.prop === 'deviceNumber') {
        this.prop = 'device_number';
      } else if (column.prop === 'planName') {
        this.prop = 'plan_name';
      } else if (column.prop === 'statusText') {
        this.prop = 'status';
      }

      if (column.order === 'ascending') {
        this.sortType = 'asc';

        console.log(this.sortType, '数据');
      } else if (column.order === 'descending') {
        this.sortType = 'desc';

        console.log(this.sortType, '数据');
      }

      this.getTableData();

      // let prop1 = column.prop;
      // let order1 = column.order;

      // if (order1 === 'ascending') {
      //   // console.log(prop1, order1, 1);
      //   this.$nextTick(function () {
      //     this.tableData.sort(function (a, b) {
      //       // console.log(a[prop1], b[prop1], 1);
      //       return a[prop1].localeCompare(b[prop1], 'zh');
      //     });
      //   });
      // } else if (order1 === 'descending') {
      //   this.$nextTick(function () {
      //     this.tableData.sort(function (a, b) {
      //       // console.log(a[prop1], b[prop1], 2);
      //       return b[prop1].localeCompare(a[prop1], 'zh');
      //     });
      //   });
      // }
    },
    // 页面跳转
    jumpFn() {
      this.$router.push({
        name: 'userChild',
        query: {
          id: 1
        },
        params: {
          name: 'xiaoming'
        }
      });
    },
    //获取配件
    getAccessories() {
      this.diglogSelectACC = true;
    },
    //提交新增工单
    submitAddOrder() {
      let params = {};
      params.address = this.handleForm.address; //地址
      params.contacts = this.handleForm.contacts; //联系人
      params.contacts_tel = this.handleForm.contacts_tel; //联系电话
      // params.customer = JSON.parse(localStorage.getItem('userInfo')).customer_name;
      params.description = this.handleForm.description;
      params.device_id = this.handleForm.device_id;
      params.device_number = this.handleForm.device_number;
      // params.device_name = this.ruleForm.deviceName;
      // this.handleForm.isReport ? (params.is_report = 1) : (params.is_report = 0);
      params.order_type = 2; //必然是保养工单
      params.project_number = parseInt(this.handleForm.project_contract);
      params.source = 2;
      // params.photos = [];
      // if (this.imgList) {
      //   this.imgList.forEach(res => {
      //     params.photos.push(res.url);
      //   });
      // }

      console.log(params);
      this.$refs.handleForm.validate(valid => {
        if (!valid) return;
        createOrder(params).then(res => {
          if (res.message === '200') {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            transferMaintainOrder({ id: this.handleForm.id, orderId: res.data }).then(res => {
              this.getTableData();
            });
            this.dialogHandleOrder = false;
          }
        });
      });
    },
    //处理工单
    submitHandle() {
      let params = {};
      params.processing_result = this.handleForm.explain;
      params.id = this.handleOrderId;
      params.accessory_list = [];
      this.multipleSelection.forEach(item => {
        let temp = {};
        temp.name = item.name;
        temp.id = item.id;
        temp.num = item.num;
        temp.number = item.number;
        params.accessory_list.push(temp);
      });
      params.accessory_list = JSON.stringify(params.accessory_list);
      console.log(params);
      this.$refs.handleForm.validate(valid => {
        if (!valid) return;
        completeOrder(params).then(res => {
          if (res.message === '200') {
            this.$message({
              message: '操作成功',
              type: 'success'
            });
            transferMaintainOrder({ id: this.noticeDetailForm.id, orderId: res.data }).then(res => {});
            this.dialogHandleOrder = false;
          }
        });
      });
    }
  },
  beforeDestroy() {
    window.onresize = null;
  }
};
</script>
<style lang="scss">
.detailNoticeDialog {
  .el-form-item__label {
    white-space: nowrap;
    background-color: rgb(242, 246, 252);
    color: rgb(144, 147, 153);
    text-align: center;
  }
  .el-form-item__content {
    padding-left: 10px !important;
  }
  .textAreaItem {
    min-height: 100px;
    .el-form-item__label {
      min-height: 100px;
      line-height: 100px;
    }
    .el-form-item__content {
      min-height: 100px;
      line-height: 100px;
      padding-left: 10px !important;
      span {
        // display: inline-block;
      }
    }
  }
}

.el-range-separator {
  width: 20px !important;
}
</style>
<style lang="scss" scoped>
.order-manage-container {
  flex-direction: column;
  width: 100%;
  height: 100%;
  padding: 0 20px;
  background-color: #fff;
  overflow: hidden;
}

.operate-bar {
  ul {
    li {
      display: inline-block;
      margin-right: 26px;
    }
  }
}

.tabsStyle {
  margin-left: 20px;
  margin-top: 36px;
  font-size: 18px;
}
.screenInput {
  width: 200px;
}
.is-top {
  font-size: 18px !important;
}
.addOrderBox {
  display: block;
  padding-top: 15px;
  padding-bottom: 15px;
  .exportOrder {
    float: right;
  }
}
.order_type,
.DateFilters,
.orderNum,
.isReportDescribe {
  margin-left: 10px;
}

.DateFilters {
  display: inline-block;
}
.orderNum {
  width: 300px;
}
.isReportDescribe {
  color: #909399;
  font-size: 13px;
}
.hideOrder {
  float: right;
  margin-top: 8px;
  margin-right: 10px;
}
.addOrder {
  float: right;
}
.short {
  width: 350px;
  display: inline-block;
}
.short:nth-child(2),
.short:nth-child(4) {
  margin-left: 26px;
}
.noticeWorkOrderDialog {
  .titleName {
    height: 36px;
    margin-bottom: 36px;
    text-align: center;

    p {
      display: inline-block;
      color: rgb(51, 120, 255);
      font-weight: 600;
      line-height: 36px;
      font-size: 24px;
    }
    span {
      color: rgb(144, 147, 153);
      display: inline-block;
      line-height: 36px;
    }
  }
}
.detailNoticeDialog {
  .titleName {
    height: 36px;
    margin-bottom: 36px;
    text-align: center;

    p {
      display: inline-block;
      color: rgb(51, 120, 255);
      font-weight: 600;
      line-height: 36px;
      font-size: 24px;
    }
    span {
      color: rgb(144, 147, 153);
      display: inline-block;
      line-height: 36px;
    }
  }

  .el-form-item {
    border: 1px solid rgb(235, 238, 245);
    margin-bottom: 0;
  }

  .shorter {
    width: 25%;
    // display: inline-block;
    float: left;
    // text-align: center;
  }
  .short {
    width: 50%;
    // display: inline-block;
    float: left;
    // text-align: center;
  }
  span {
    color: rgb(96, 98, 102);
  }
}
// .noticeWorkOrderDialog {
// }

::v-deep div[aria-label='选择配件'] > .el-dialog__body {
  height: 50vh;
  overflow-y: hidden;
  padding-top: 0px !important;
}
::v-deep .el-table__body-wrapper {
  &::-webkit-scrollbar {
    width: 10px;
    height: 10px;
    background-color: transparent;
  }
  &::-webkit-scrollbar-track {
    background-color: transparent;
  }
  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #c4c6cc;
  }
}
.deleteBtm {
  color: #f56c6c;
  cursor: pointer;
  border: 0px;
}
::v-deep .el-upload-list__item.is-ready {
  display: none;
}

.pagedown {
  float: right;
  position: absolute;
  z-index: 999;
  bottom: 15px;
  left: 0;
  right: 30px;
  // margin-right: 30px;
  width: auto !important;
}
.tableBox {
  overflow: auto;
}
</style>
